/* eslint react/no-string-refs:0 */
import React, {Component} from 'react';
import IceContainer from '@icedesign/container';
import {Input, Grid, Button, Select} from '@icedesign/base';
import {withRouter, Link} from 'react-router-dom';
import {Feedback} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PropTypes from 'prop-types';

const {Row, Col} = Grid;

import DataBinder from '@icedesign/data-binder';
import {getOuName, getStaName} from "../../../../api/station";

@withRouter
@DataBinder({
  CreateData: {
    url: '/api/creatStaData',
    method: 'post',
    data: {       // todo 发送参数的格式
      values: {
        IsImgDelete: 0,
        // OUCode: "102023004",
        OUName: "襄阳信息维护工区",
        STA_ATTRIB: "6502",
        STA_ID: "",
        STA_LINENAME: "东桥",
        STA_NAME: "东桥",
        STA_ORDER: 7,
      }
    },
    success: (res, defaultCallback, originResponse) => {
      // console.log('请求成功了，返回的数据为', res)
      // console.log("orginResponse",originResponse)
      // 执行默认的逻辑请求成功逻辑
      // 通常为弹出反馈 Toast
      if (res.status == 200) {
        // alert("data update success")
        Feedback.toast.success("data update success");
      } else {
        Feedback.toast.error("create fail",originResponse.statusText);
      }
      defaultCallback(); // 没有找到是哪里执行
      // originResponse 内容请参见：https://github.com/axios/axios#response-schema
    },
    error: (res, defaultCallback, originResponse) => {
      // console.log("err",'res', res, originResponse);

      Feedback.toast.error("create fail",originResponse.statusText);
      defaultCallback();
    },
    defaultBindingData: { // todo 这里是 接口返回数据的格式
      status: 200,
      statusText: 'ok',
      data: {
        ListResult: [],
        current: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
})
export default class Form extends Component {
  static displayName = 'StationForm';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {
        'STA_ID':'',
        'STA_NAME': '',
        'STA_LINENAME': '',
        // 'OUCode': '',
        'OUName': '',
        'STA_ORDER': 0,
        'STA_ATTRIB': '',
        'IsImgDelete': 0
      },
      po: getOuName({}),
    };


  }
  componentWillMount() {
    this.LoadOuNameData()
  }

  LoadOuNameData() {
    let data = [];
    this.state.po.then(res => {
      if (res.data.status == 200) {
        data = res.data.data
        // let result = []
        // console.log(data)
        const dataSource = data.map(item => {
          return {
            label: item,
            value: item
          };
        });

        this.setState({
          dataSource
        });

        // return data
      } else {
        alert("/api/getOuName, 接口出错")
      }
      // console.log(data)

    }).catch(err => {
      console.log(err)
      alert("/api/getOuName 接口出错" + err)
    });

    // console.log(data)

    // this.props.updateBindingData('RecvDevice');
  }


  check_STAORDER = (rule, values, callback) => {
    // console.log(rule, values)
    let regex = new RegExp(/^[1-9]\d*$/, "g")
    if (regex.test(values)) {
      callback()
    } else {
      callback("请输入数字");
    }
  };


  formChange = (value) => {
    this.setState({
      value,
    });
  };

  handleButtonClick = (e) => {

    // console.log(this.state)
    if (this.state.value.STA_ID==""){
      Feedback.toast.error('车站_ID 必填项');
      return
    }

    if (this.state.value.OUName==""){
      Feedback.toast.error('机构名称 必填项');
      return
    }

    // if (this.state.value.OUCode==""){
    //   Feedback.toast.error('OUCode 必填项');
    //   return
    // }

    if (this.state.value.STA_NAME==""){
      Feedback.toast.error('车站名称 必填项');
      return
    }

    if (this.state.value.STA_LINENAME==""){
      Feedback.toast.error('车站线路名称 必填项');
      return
    }

    if (this.state.value.STA_ATTRIB==""){
      Feedback.toast.error('STA_ATTRIB 必填项');
      return
    }
    console.log(this.state.value)
        this.props.updateBindingData('CreateData', {
            data: {
              values: this.state.value
            }
          }, () => {
          Feedback.toast.success('新建车站成功');
          this.props.history.push('/station/manager');
        }
        )
  };

  // validateFields = () => {
  //   this.refs.form.validateFields((errors, values) => {
  //     console.log(errors, values);
  //     //提交后台
  //     this.props.updateBindingData('updateData', {
  //         data: {
  //           values: values
  //         }
  //       }, () => {
  //         Feedback.toast.success('新建用户成功');
  //         this.props.history.push('/userManager');
  //       }
  //     );
  //   });
  // }

  render() {
    return (
      <div className="user-form">
        <IceContainer>
          <IceFormBinderWrapper
            value={this.state.value}
            onChange={this.formChange}
            ref="form"
          >
            <div style={styles.formContent}>
              <h2 style={styles.formTitle}>添加车站信息</h2>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>
                  车站ID：
                </Col>
                <Col s="12" l="10">
                  <IceFormBinder
                    type="string"
                    name="STA_ID"
                    required
                    message="必填"
                  >

                    <Input
                      size="large"
                      placeholder="WHBUR_WHSEG_STA_8907"
                      style={{width: '100%'}}
                    />
                  </IceFormBinder>
                  <IceFormError name="STA_ID"/>
                </Col>
              </Row>


              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>
                  车站名称：
                </Col>
                <Col s="12" l="10">
                  <IceFormBinder
                    type="string"
                    name="STA_NAME"
                    required
                    message="必填"
                  >

                    <Input
                      size="large"
                      placeholder="钟祥"
                      style={{width: '100%'}}
                    />
                  </IceFormBinder>
                  <IceFormError name="STA_NAME"/>
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>
                  车站线路名称：
                </Col>
                <Col s="12" l="10">
                  <IceFormBinder
                    type="string"
                    name="STA_LINENAME"
                    required
                    message="必填"
                  >
                    <Input
                      size="large"
                      placeholder="钟祥"
                      style={{width: '100%'}}
                    />
                  </IceFormBinder>
                  <IceFormError name="STA_LINENAME"/>
                </Col>
              </Row>



              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>
                  启用：
                </Col>
                <Col s="12" l="10">
                  <IceFormBinder name="IsImgDelete">
                    <Select
                      style={{width: '100%'}}
                      size="large"
                      placeholder="请选择..."
                      dataSource={[
                        {label: '启用', value: '0'},
                        {label: '禁用', value: '1'},
                      ]}
                    />
                  </IceFormBinder>
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>
                  STA_ATTRIB：
                </Col>
                <Col s="12" l="10">
                  <IceFormBinder
                    type="string"
                    name="STA_ATTRIB"
                    required
                    message="必填"
                  >
                    <Input
                      style={{width: '100%'}}
                      size="large"
                      placeholder="TYJL-ADX"
                    />
                  </IceFormBinder>
                  <IceFormError name="STA_ATTRIB"/>
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>
                  机构名称：
                </Col>
                <Col l="16">
                  <div style={styles.formItem}>
                    <IceFormBinder triggerType="onBlur">
                      <Select name="OUName" size="large" style={{width: '200px'}}
                              dataSource={this.state.dataSource}
                      >
                      </Select>
                    </IceFormBinder>
                    <div style={styles.formError}>
                      <IceFormError name="type"/>
                    </div>
                  </div>
                </Col>
              </Row>

              <Row style={styles.formItem}>
                <Col xxs="6" s="3" l="3" style={styles.formLabel}>
                  STA_ORDER：
                </Col>
                <Col s="12" l="10">
                  <IceFormBinder
                    name="STA_ORDER"
                    required
                    validator={this.check_STAORDER}
                  >
                    <Input
                      style={{width: '100%'}}
                      size="large"
                      placeholder="请输入数字"
                    />
                  </IceFormBinder>
                  <IceFormError name="STA_ORDER"/>
                </Col>
              </Row>


            </div>
          </IceFormBinderWrapper>

          <Row style={{marginTop: 20}}>
            <Col offset="3">
              <Button
                size="large"
                type="primary"

                onClick={this.handleButtonClick}
              >
                提 交
              </Button>
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    marginBottom: 25,
  },
  formLabel: {
    height: '32px',
    lineHeight: '32px',
    textAlign: 'right',
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
